<template>
  <view class="reminderSettings allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="提醒设置" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(1)">
      <view class="personalData_avatar row items-center justify-between">
        <text class="personalData_avatar_text">
          当天提醒
        </text>
        <view class="personalData_avatar_icon" v-if="reminderSettings.same_day != 1">
        </view>
        <view class="personalData_avatar_iconSelect" v-else>
        </view>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(2)">
      <view class="personalData_avatar row items-center justify-between">
        <text class="personalData_avatar_text">
          提前1天
        </text>
        <view class="personalData_avatar_icon" v-if="reminderSettings.bf_day != 1">
        </view>
        <view class="personalData_avatar_iconSelect" v-else>
        </view>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(3)">
      <view class="personalData_avatar row items-center justify-between">
        <text class="personalData_avatar_text">
          提前3天
        </text>
        <view class="personalData_avatar_icon" v-if="reminderSettings.three_day != 1">
        </view>
        <view class="personalData_avatar_iconSelect" v-else>
        </view>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(4)">
      <view class="personalData_avatar row items-center justify-between">
        <text class="personalData_avatar_text">
          提前7天
        </text>
        <view class="personalData_avatar_icon" v-if="reminderSettings.seven_day != 1">
        </view>
        <view class="personalData_avatar_iconSelect" v-else>
        </view>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(5)">
      <view class="personalData_avatar row items-center justify-between">
        <text class="personalData_avatar_text">
          提前15天
        </text>
        <view class="personalData_avatar_icon" v-if="reminderSettings.fifteen_day != 1">
        </view>
        <view class="personalData_avatar_iconSelect" v-else>
        </view>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(6)">
      <view class="personalData_avatar row items-center justify-between">
        <text class="personalData_avatar_text">
          提前30天
        </text>
        <view class="personalData_avatar_icon" v-if="reminderSettings.thirty_day != 1">
        </view>
        <view class="personalData_avatar_iconSelect" v-else>
        </view>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(7)">
      <view class="personalData_avatar row items-center justify-between">
        <text class="personalData_avatar_text">
          不提醒
        </text>
        <view class="personalData_avatar_icon" v-if="reminderSettings.remind != 1">
        </view>
        <view class="personalData_avatar_iconSelect" v-else>
        </view>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" :is-show-title="false" @elementClick="setReminders(8)">
      <view class="personalData_avatar row items-center justify-between">
        <text class="personalData_avatar_text">
          双历提醒
        </text>
        <text class="personalData_avatar_tips">
          公历和农历生日都进行提醒
        </text>
        <view class="personalData_avatar_icon" v-if="reminderSettings.calendar != 1">
        </view>
        <view class="personalData_avatar_iconSelect" v-else>
        </view>
      </view>
    </single-gap>
    <view class="reminderSettings_bottom allRowCenter mt-54" @click.stop="confirmReminders">
      <text class="reminderSettings_bottom_tips">确定</text>
    </view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import SingleGap from "../../components/shiqinComponents/shiqin_pageGap/singleGap.vue";
import {getUserInfoSetting, getUserSetting, updateUserSetting} from "../../api/shiqinAPI";

export default {
  components: {SingleGap, HeaderTitle},
  data() {
    return {
      headerHeight: 0,
      // 配置信息
      reminderSettings: {},
      options: {}
    };
  },
  onLoad(options) {
    this.options = options
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  onShow() {
    this.getReminderSettings()
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    // 获取提醒设置
    async getReminderSettings() {
      let {data} = await getUserSetting()
      this.reminderSettings = data.res
    },
    // 设置提醒设置
    setReminders(index) {
      switch (index) {
        case 1:
          this.$set(this.reminderSettings, 'same_day', this.reminderSettings.same_day != 1 ? 1 : 0)
          this.$set(this.reminderSettings, 'remind', 0)
          return
        case 2:
          this.$set(this.reminderSettings, 'bf_day', this.reminderSettings.bf_day != 1 ? 1 : 0)
          this.$set(this.reminderSettings, 'remind', 0)
          return;
        case 3:
          this.$set(this.reminderSettings, 'three_day', this.reminderSettings.three_day != 1 ? 1 : 0)
          this.$set(this.reminderSettings, 'remind', 0)
          return;
        case 4:
          this.$set(this.reminderSettings, 'seven_day', this.reminderSettings.seven_day != 1 ? 1 : 0)
          this.$set(this.reminderSettings, 'remind', 0)
          return;
        case 5:
          this.$set(this.reminderSettings, 'fifteen_day', this.reminderSettings.fifteen_day != 1 ? 1 : 0)
          this.$set(this.reminderSettings, 'remind', 0)
          return;
        case 6:
          this.$set(this.reminderSettings, 'thirty_day', this.reminderSettings.thirty_day != 1 ? 1 : 0)
          this.$set(this.reminderSettings, 'remind', 0)
          return;
        case 7:
          this.$set(this.reminderSettings, 'same_day', 0)
          this.$set(this.reminderSettings, 'bf_day', 0)
          this.$set(this.reminderSettings, 'three_day', 0)
          this.$set(this.reminderSettings, 'seven_day', 0)
          this.$set(this.reminderSettings, 'fifteen_day', 0)
          this.$set(this.reminderSettings, 'thirty_day', 0)
          this.$set(this.reminderSettings, 'calendar', 0)
          this.$set(this.reminderSettings, 'remind', this.reminderSettings.remind != 1 ? 1 : 0)
          if (this.reminderSettings.remind == 0) {
            this.$set(this.reminderSettings, 'same_day', 1)
          }
          return;
        case 8:
          this.$set(this.reminderSettings, 'calendar', this.reminderSettings.calendar != 1 ? 1 : 0)
          if (this.reminderSettings.calendar == 1) {
            this.$set(this.reminderSettings, 'remind', 0)
          }
          return;
      }
    },
    // 确定设置提醒
    async confirmReminders() {
      let {status, msg} = await updateUserSetting(this.reminderSettings)
      if(status == '200'){
        uni.showToast({
          title:'设置成功',
          icon:'none'
        })
        setTimeout(()=>{
          uni.navigateBack()
        },1500)
      }else{
        uni.showToast({
          title:msg,
          icon:'none'
        })
      }
    }
  },
}
</script>

<style lang="scss">
.reminderSettings {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .personalData_avatar {
    width: 666rpx;

    .personalData_avatar_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #4B4B4B;
    }

    .personalData_avatar_tips {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #A0A0A0;
    }

    .personalData_avatar_icon {
      width: 26rpx;
      height: 26rpx;
      border-radius: 13rpx 13rpx 13rpx 13rpx;
      border: 2rpx solid #707070;
    }

    .personalData_avatar_iconSelect {
      width: 26rpx;
      height: 26rpx;
      border-radius: 13rpx 13rpx 13rpx 13rpx;
      border: 6rpx solid #FF4206;
    }
  }

  .reminderSettings_bottom {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 57rpx 57rpx 57rpx 57rpx;

    .reminderSettings_bottom_tips {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>
